/**
 * Created by mleaf on 2017/8/25.
 */
var React = require('react');
var ZigbeeTable = require('./ZigbeeTable');

// with es5
var ReactDOM = require('react-dom');
var ReactBsTable  = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;


var Zigbee = React.createClass({
    getInitialState : function (){ //定义为State
        return{
            DataList : [] //为空的数组
        }
    },
    zigebee_list : function(mac){//获取数据
        $.ajax({
            type : 'get',
            url : '/zigbee_list',
        }).done(function(resp){
            if(resp.status == "success"){
                this.setState({DataList:resp.data});
            }
        }.bind(this))
    },
    ctrl_list : function(mac){//获取数据
        $.ajax({
            type : 'get',
            url : '/ctrl_zigbee_list',
        }).done(function(resp){
            if(resp.status == "success"){
                this.setState({DataList:resp.data});
            }
        }.bind(this))
    },
    ctrlZigbee : function(deviceAddress, deviceType, endpoint_id,command){//发送控制命令
        $.ajax({
            type : 'post',
            url : '/ctrl_zigbee_device',
            data : {
                deviceAddress:deviceAddress,
                deviceType:deviceType,
                endpoint_id:endpoint_id,
                command:command
            }
        }).done(function(resp){
            if(resp.status =="success"){//如果更新刷新一下列表
                this.zigebee_list();
            }
        }.bind(this))
    },
    componentDidMount : function () { //组件挂载后调用listData
        this.zigebee_list();
    },
    renderSizePerPageDropDown : function () {
        return (
          <SizePerPageDropDown
            className='my-size-per-page'
            btnContextual='btn-warning'
            variation='dropup'
            />
        );
      },
    handleDeletedRow: function(rowKeys) {
        //console.log('delete'+ rowKeys);
        this.deleteData(rowKeys);
    },
    handleRowClick: function(rowKeys) {
        console.log('RowClick'+ rowKeys)
    },
    actionFormatter: function(cell, row){//action 按钮
        return <ZigbeeTable
            ctrlZigbee={this.ctrlZigbee}
            action={ row }/>;
    },
    render : function(){

        const options = {
            clearSearch: true,
            sizePerPageDropDown: this.renderSizePerPageDropDown,//每一页显示多少数据
            afterDeleteRow: this.handleDeletedRow//删除按钮
            //onRowClick: this.handleRowClick,
        };
        const selectRow = {
            mode: 'checkbox'
            //clickToSelect: true
        };
        const cellEditProp = {
            mode: 'click',
            blurToSave: true
        };
        return (
            <BootstrapTable
                data={ this.state.DataList }
                options={ options }
                selectRow={ selectRow }
                cellEdit={ cellEditProp }
                pagination={ true }  striped={ true } hover={ true } condensed={ true } search deleteRow>
                <TableHeaderColumn hidden={false} dataField='deviceAddress' isKey={ true }>Product ID</TableHeaderColumn>
                <TableHeaderColumn editable={ false } dataField='deviceName' >Name</TableHeaderColumn>
                <TableHeaderColumn editable={ false } dataField='deviceStatus'>Status</TableHeaderColumn>
                <TableHeaderColumn editable={ false } dataField='deviceType'>deviceType</TableHeaderColumn>
                <TableHeaderColumn hidden={true} dataField='endpoint_id'>Endpoint_Id</TableHeaderColumn>
                <TableHeaderColumn dataField='action'
                   editable={ false }
                   dataFormat={ this.actionFormatter }
                   export={ false }>Action</TableHeaderColumn>
            </BootstrapTable>
        )
    }
});

module.exports = Zigbee;